<template>
  <div>
    <div class="student-item" v-for="(item, index) in studentList" :key="index">
      <div class="avatar"><img :src="item.head_sculpture ? item.head_sculpture : avatar" alt="" width="100%"></div>
      <div class="user">
        <div class="name">
          <p class="nickname">{{ item.name }}</p>
          <!--<p class="time">下次课时间{{ item.time }}</p>-->
        </div>
        <div class="icon-box">
          <span style="margin-right: 10px;">
            <router-link :to="`/studentEdit?sid=${item.id}`" style="color: #3A7FE2;font-size: 12px;">编辑</router-link>
          </span>
          <span @click="toDelete(item.id)" style="color: #C789A0;font-size: 12px;">删除</span>
        </div>
      </div>
    </div>
    <div class="line">
      <van-divider>共 {{ studentList.length }} 名学生</van-divider>
    </div>
    <div class="flxed-btn">
      <van-button plain hairline type="info" size="large" @click="showAdd = true">添加</van-button>
    </div>
    <van-dialog
      v-model="showAdd"
      class="close-dialog"
      :before-close="addStudent"
      show-cancel-button>
      <van-field v-model="addForm.name" label="学生姓名" placeholder="请输入学生姓名"/>
      <van-field v-model="addForm.phone" label="电话号码"  placeholder="请输入手机号码"/>
      <!--<van-field v-model="addForm.class_hour" label="剩余课时"  placeholder="请输入剩余课时"/>-->
      <div class="close" slot="title" @click="showAdd = false"><img src="../../../../assets/img/icon-close.png" alt=""></div>
    </van-dialog>
  </div>
</template>

<script>
import api from '@/api'
import {validatePhone} from '@/utils'
export default {
  name: 'student-list',
  data () {
    return {
      studentList: [],
      addForm: {
        name: '',
        phone: ''
        // class_hour: ''
      },
      showAdd: false,
      avatar: require('@/assets/img/icon-avatar.png')
    }
  },
  created () {
    this.getStudentr()
  },
  methods: {
    // 查询学生列表
    getStudentr () {
      let params = {
        teacher_id: JSON.parse(sessionStorage.getItem('user')).id
        // teacher_id: '1'
      }
      api.teacherGetStudentr({
        params,
        callback: res => {
          if (res.data.error_code === 0) {
            this.studentList = res.data.data
          }
        }
      })
    },
    // 添加学生
    addStudent (action, done) {
      if (action === 'cancel') {
        done()
      } else {
        console.log(this.addForm, action)
        if (!this.addForm.name) {
          this.$toast({
            message: '学生名字不能为空',
            duration: 1000
          })
          return
        } else if (!validatePhone(this.addForm.phone)) {
          this.$toast({
            message: '请填写正确的手机号',
            duration: 1000
          })
          return
        }
        let params = {
          teacher_id: JSON.parse(sessionStorage.getItem('user')).id,
          ...this.addForm
        }
        api.teacherAddStudent({
          params,
          callback: res => {
            if (res.data.error_code === 0) {
              this.showAdd = false
              done(false)
              this.getStudentr()
            }
          }
        })
      }
    },
    // 删除学生
    toDelete (id) {
      this.Dialog.confirm({
        title: '删除',
        message: '确认删除该学生吗？'
      }).then(() => {
        // on confirm
        this.deleteStudent(id)
      }).catch(() => {
        // on cancel
      })
    },
    deleteStudent (id) {
      api.teacherDelStudent({
        params: {
          student_id: id,
          teacher_id: JSON.parse(sessionStorage.getItem('user')).id
        },
        callback: res => {
          this.$toast(res.data.message)
          if (res.data.error_code === 0) {
            this.getStudentr()
          }
        }
      })
    }
  }
}
</script>

<style scoped>
  .student-item{
    display: flex;
    padding: 0 0 0 15px;
    align-items: center;
  }
  .student-item .avatar{
    width: 50px;
    height: 50px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    flex-grow: 0;
    margin-right: 20px;
  }
  .student-item .user{
    flex-shrink: 1;
    flex-grow: 1;
    border-bottom: 1px solid #999;
    padding: 12px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
  }
  .user .name .nickname{
    font-size:18px;
    font-family:PingFang SC;
    font-weight:bold;
    line-height:30px;
    color:rgba(26,29,32,1);
  }
  .user .name .time{
    font-size: 11px;
    font-family: PingFang SC;
    font-weight: 400;
    line-height: 16px;
    color: rgba(102,102,102,1);
    letter-spacing: 2px;
  }
  .line{
    padding-bottom: 50px;
  }
  .flxed-btn{
    position: fixed;
    bottom: 0;
    width: 100%;
    left: 0;
    padding: 10px;
    box-sizing: border-box;
    background-color: #fff;
  }
</style>
